// import React from 'react'
// import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Carousel, Button, Checkbox, Form, Input, message } from 'antd'
import 'antd/dist/antd.min.css'
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
import '../../scss/use/login.scss'
function Login() {
  const navigate = useNavigate();
  const onFinish = (values: any) => {
    console.log('Success:', values);
    axios.post('http://127.0.0.1:81/login', {
      params: { values }
    }).then((res: any) => {
      console.log(res);
      if (res.data.code === -2) {
        message.error(res.data.msg)
      } else if (res.data.code === -1) {
        // alert(res.data.msg)
        message.error(res.data.msg)
        setTimeout(() => {
          //路由重定向
          navigate({ pathname: '/register' })
        }, 1500)
      } else {
        // alert(res.data.msg)
        if (res.status=== 200) {
          message.success(res.data.msg)
          setTimeout(() => {
            //路由重定向
            navigate({ pathname: '/' })
          }, 1500)
          sessionStorage.setItem('nickname', res.data.nickname)
          sessionStorage.setItem('selfinTroduction', res.data.selfinTroduction)
          sessionStorage.setItem('avatar', res.data.avatar)
          sessionStorage.setItem('uid', res.data.uid)
        }
      }
    }).catch(function (error: any) {
      console.log(error);
    });

  };

  //点击进入注册页
  const ToReg = () => {
    navigate({ pathname: '/register' })
  }

  return (
    <div style={{backgroundColor:' #222'}}>
    <div className="loginBox">
      <div className="leftBox">
        <Carousel autoplay={true}>
          <div>
            <h3 className='contentStyle'><img src="https://static.7mx.com/static/img/img1.f38f792.jpg" alt="" /></h3>
          </div>
          <div>
            <h3 className='contentStyle'><img src="https://static.7mx.com/static/img/img2.b9a8935.jpg" alt="" /></h3>
          </div>
          <div>
            <h3 className='contentStyle'><img src="https://static.7mx.com/static/img/img3.32c103b.jpg" alt="" /></h3>
          </div>
        </Carousel>
      </div>
      <div className="login-info">
        <div className='deng'>
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{ remember: true }}
            onFinish={onFinish}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入你的账号!', max: 11 },
              ({ getFieldValue }) => ({
                validator(_, e: any) {
                  const value = getFieldValue('phone');
                  if (value) {
                    if (value.length === 11 && !(/^(1[3456789]|9[28])\d{9}$/).test(value)) {
                      return Promise.reject(new Error('请输入11位有效电话号码!'));
                    }
                    if (value.length !== 11) {
                      return Promise.reject(new Error('请输入11位电话号码!'));
                    }
                    return Promise.resolve();
                  }
                  return Promise.resolve();
                },
              }),
              ]}
            >
              <Input placeholder="账号" size="large" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入你密码!' }]}
            >
              <Input
                type="password"
                placeholder="密码"
                size="large"
              />
            </Form.Item>
            <Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox style={{ float: 'left' }}>记住我</Checkbox>
              </Form.Item>

              <a className="login-form-forgot" href="#" style={{ float: 'right' }}>
                忘记密码
              </a>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button" size='large' block>
                登录
              </Button>
              <a href="#" onClick={ToReg}>没有账号？ 立即注册</a>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
    </div>
  )
}

export default Login
